<!-- 虚拟设备 -->
<template>
  <!-- 顶部 搜索栏 -->
  <el-form :model="form" class="demo-form-inline" :inline="true">
    <el-form-item label="设备名称">
      <el-input v-model="seachValue.name" clearable />
    </el-form-item>
    <el-form-item label="设备类型">
      <el-cascader
        style="width: 100%"
        v-model="seachValue.DevicetypeValue"
        :options="options"
        :show-all-levels="false"
        clearable
        placeholder="请选择设备类型"
        :props="{ value: 'DevicetypeValue', label: 'DevicetypeName', checkStrictly: true }"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="getSeachList"
        ><el-icon><Search /></el-icon> 搜索
      </el-button>
      <el-button @click="rest"
        ><el-icon><Refresh /></el-icon> 重置
      </el-button>
    </el-form-item>
  </el-form>

  <el-row :gutter="10">
    <el-col :span="1.5">
      <el-button type="primary" plain size="mini" @click="addDevice" :disabled="buttonshow"
        ><el-icon><Plus /></el-icon> 新增设备
      </el-button>
    </el-col>
  </el-row>

  <!-- table 表格 -->
  <el-table
    ref="multipleTableRef"
    :data="tableData"
    style="width: 100%; margin-top: 10px"
    show-overflow-tooltip
  >
    <el-table-column type="selection" />
    <el-table-column property="code" label="设备类别" align="center">
      <template #default="scope">{{ scope.row.DevicetypeValue }}</template>
    </el-table-column>
    <el-table-column property="name" label="设备名称" align="center" />
    <el-table-column property="DevicetypeName" label="设备类型" align="center" />
    <!-- <el-table-column property="state" label="状态"  align="center">
      <template #default="scope">
        <div>{{ scope.row }}</div>
      </template>
    </el-table-column> -->
    <el-table-column label="操作" align="center">
      <template #default="scope">
        <el-link :underline="false" @click="change(scope.row)" style="margin-right: 20px"
          >修改</el-link
        >
        <el-link :underline="false" @click="deldevice(scope.row.id)">删除</el-link>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    style="float: right"
    v-model="currentPage"
    :total="total"
    :page-size="pageSize"
    @current-change="handleCurrentChange"
  ></el-pagination>

  <AddDevice ref="adddeviceref" @update="updateList"></AddDevice>
  <ChangeDevice ref="ChangeDeviceref" @update="updateList"></ChangeDevice>
</template>
  <script>
import { defineComponent, ref, onMounted } from 'vue'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
import until from './seach'
import AddDevice from './AddDevice.vue'
import ChangeDevice from './ChangeDevice.vue'
export default defineComponent({
  components: {
    AddDevice,
    ChangeDevice
  },
  setup(_, { emit }) {
    const store = useStore()
    // 搜索展示的数组
    const Searchlist = ref([])
    //   顶部输入框 搜索数据
    const seachValue = ref({ name: '', DevicetypeValue: '', isVirtual: 'IS_VIRTUAL' })

    // 多少页
    const page = ref(0)
    // 一页多少条
    const pagesize = ref(10)
    // 当前页数
    const currentPage = ref(null)
    // 总条数
    const total = ref(null)
    //  每页显示的条目数
    const pageSize = ref(null)
    // 总页数
    const totalPage = ref(null)

    // 页面展示的数组
    const tableData = ref()
    // 页面级联选择器
    const options = ref(null)
    // 修改表单实例对象
    const multipleTableRef = ref(null)

    // 新增设备 组件的实例对象
    const adddeviceref = ref(null)

    // 修改设备 组件的实例对象
    const ChangeDevice = ref(null)

    // 新增虚拟设备 组件实例对象
    const addVirtualDevice = ref(null)

    //
    const ChangeDeviceref = ref(null)

    onMounted(() => {
      rest()
      let deviceTypeStr = store.state.deviceTypeStr
      let device = JSON.parse(JSON.stringify(deviceTypeStr))
      let filterVirtual = device.children.filter((item) => item.isVirtual === 'IS_VIRTUAL')
      options.value = filterVirtual
      deviceTypeStr = null
      device = null
      filterVirtual = null
    })

    // 新增设备
    const addDevice = () => {
      adddeviceref.value.dialogVisible = true
    }

    // 新增虚拟设备
    const AddVirtualDevice = () => {
      addVirtualDevice.value.dialogVisible = true
    }
    //  删除设备
    const deldevice = (id) => {
      const res = window.api.removeDvcAndDvcVersion(id)
      if (res === '删除成功') {
        ElMessage.success('删除成功')
        rest()
      } else {
        ElMessage.error(res)
      }
    }

    // 修改设备
    const modify = (data) => {
      //  changeDevice  假数据  值到位传data即可
      const device = JSON.parse(window.api.getDvcAndDvcVerById(data.id))
      if (device.DevicetypeValue === 2001 || device.DevicetypeValue === 2002) {
        ElMessage.error('此设备不允许修改')
      } else {
        ChangeDevice.value.OpenDialogVisible(device)
      }
    }

    // 重置
    const rest = () => {
      seachValue.value = { name: '', DevicetypeValue: '' }
      newlist(until.seachList({ isVirtual: 'IS_VIRTUAL' }, page.value, pagesize.value))
      let res = window.api.listDvcAndDvcVer()
      store.commit('beforeAllDeviceupdate', JSON.parse(res))
      res = null
    }

    // 搜索 页面 跳转
    const handleCurrentChange = (newPage) => {
      page.value = newPage - 1
      getSeachList()
      // tableData.value = Searchlist.value
      // const res = tableData.value.filter((item) => item.isVirtual === 'IS_VIRTUAL')
      // tableData.value = res
    }

    // 搜索
    const getSeachList = () => {
      let seachchange = { isVirtual: 'IS_VIRTUAL' }
      if (seachValue.value.name && Boolean(seachValue.value.DevicetypeValue) === false) {
        seachchange.name = seachValue.value.name
        newlist(until.seachList(seachchange, page.value, pagesize.value))
      }
      if (Boolean(seachValue.value.name) === false && seachValue.value.DevicetypeValue) {
        const num = seachValue.value.DevicetypeValue[seachValue.value.DevicetypeValue.length - 1]
        seachchange.DevicetypeValue = num
        newlist(until.seachList(seachchange, page.value, pagesize.value))
      }
      if (
        Boolean(seachValue.value.name) === false &&
        Boolean(seachValue.value.DevicetypeValue) === false
      ) {
        newlist(until.seachList({ isVirtual: 'IS_VIRTUAL' }, page.value, pagesize.value))
      }
    }
    // 更新数据
    const newlist = (res) => {
      tableData.value = res.Searchlist
      // const list = tableData.value.filter((item) => item.isVirtual === 'IS_VIRTUAL')
      // tableData.value = list

      currentPage.value = res.totalList.currentPage
      pageSize.value = res.totalList.pageSize
      total.value = res.totalList.total
      totalPage.value = res.totalList.totalPage
    }
    // 更新数据
    const updateList = () => {
      rest()
    }
    // 修改
    const change = (data) => {
      let dds = JSON.parse(JSON.stringify(data))
      // const device = JSON.parse(window.api.getDvcAndDvcVerById(data.id))

      let a = JSON.parse(data.values)
      dds.property = a
      dds.values = a
      ChangeDeviceref.value.VirtualValue = dds
      ChangeDeviceref.value.ruleForm.property = a
      ChangeDeviceref.value.ruleForm.name = data.name
      ChangeDeviceref.value.ruleForm.DevicetypeValue = data.DevicetypeValue
      ChangeDeviceref.value.ruleForm.id = data.id
      ChangeDeviceref.value.ruleForm.DevicetypeName = data.DevicetypeName
      // ChangeDeviceref.value.VirtualValue.property = JSON.parse(data.values)
      // ChangeDeviceref.value.VirtualValue.values = JSON.parse(data.values)
      // ChangeDeviceref.value.VirtualValue.DevicetypeName = data.DevicetypeName

      ChangeDeviceref.value.getNewlist()
      ChangeDeviceref.value.selectList = [dds.DevicetypeValue]
      ChangeDeviceref.value.dialogVisible = true

      // ChangeDevice.value.OpenDialogVisible(device)

      // ChangeDevice.value.IOmodelValue = data.pid
    }
    return {
      tableData,
      options,
      multipleTableRef,
      adddeviceref,
      ChangeDevice,
      seachValue,
      currentPage,
      total,
      totalPage,
      addVirtualDevice,
      ChangeDeviceref,
      handleCurrentChange,
      AddVirtualDevice,
      rest,
      addDevice,
      modify,
      deldevice,
      getSeachList,
      newlist,
      updateList,
      change
    }
  }
})
</script>
  
  <style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
</style>